<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="646px"
      title="人员分组名称"
      wrapClassName="group-modal-container"
      @cancel="closeModal()"
    >
      <div class="modal-main">
        <a-row :gutter="0">
          <a-form-model ref="form" :model="form" :rules="rules">
            <a-col :span="24">
              <a-form-model-item label="人员分组名称" prop="groupName">
                <a-input
                  v-model="form.groupName"
                  placeholder="请输入人员分组名称"
                />
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </a-row>
      </div>
      <div class="modal-footer">
        <a-button type="default" @click="closeModal()"> 取消 </a-button>
        <a-button type="primary" @click="submit()" :loading="loading">
          确定
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { notificationTip } from "@/utils";
import { saveOrEditUserConfig } from "@/api/user-center/flowPathConfig.js";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    modal: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        groupName: "",
      },
      rules: {
        groupName: [
          {
            required: true,
            message: "请输入人员分组名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let { groupName } = this.form;
          let { tenantCode, nodeId, hasChoosedUser } = this.modal;
          let formJson = {
            //分组名称
            groupName,
            //租户编码
            tenantCode,
            //节点id
            nodeId,
            //人员信息
            users: [],
            type: "2",
          };
          hasChoosedUser.forEach((item) => {
            formJson.users.push({
              userId: item.value,
              userName: item.label,
            });
          });
          saveOrEditUserConfig(formJson)
            .then((res) => {
              let { data } = res;
              notificationTip("success", "操作成功");
              this.closeModal();
              this.$parent.closeModal();
              this.$parent.$parent.getTableData();
            })
            .catch((_) => {})
            .finally((_) => {
              this.loading = false;
            });
        }
      });
    },
    //关闭弹框
    closeModal() {
      this.$refs.form.resetFields();
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.group-modal-container {
  .ant-empty {
    margin: 0;
    height: 93%;
  }
  .ant-modal-body {
    padding: 0;
  }
  .modal-main {
    box-sizing: border-box;
    padding: 20px 60px 20px 20px;
    max-height: 620px;
    .custom-scrollbar();
    .ant-form-item {
      display: flex;
      .ant-form-item-label {
        width: 120px;
        white-space: pre-wrap;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 36px;
        line-height: 20px;
        label {
          color: #999999;
        }
      }
      .check-item-select {
        height: 86px;
        .ant-select-selection__rendered {
          height: 86px;
          .ant-select-selection__placeholder {
            margin-top: -40px !important;
          }
        }
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
  }
  .modal-footer {
    text-align: center;
    padding-bottom: 20px;
  }
}
</style>
